<div class="box">
  <div class="top">
    <x-button x-popover content="top start, top start, top start, top start, top start" placement="top-start">top start</x-button>
    <x-button x-popover content="top, top, top, top, top, top, top, top" placement="top">top</x-button>
    <x-button x-popover content="top end, top end, top end, top end, top end, top end" placement="top-end">top end</x-button>
  </div>
  <div class="left">
    <x-button x-popover content="left start, left start, left start, left start, left start" placement="left-start">left start</x-button
    ><x-button x-popover content="left, left, left, left, left, left, left" placement="left">left</x-button
    ><x-button x-popover content="left end, left end, left end, left end, left end" placement="left-end">left end</x-button>
  </div>
  <div class="right">
    <x-button x-popover content="right start, right start, right start, right start, right start" placement="right-start"
      >right start</x-button
    ><x-button x-popover content="right, right, right, right, right, right" placement="right">right</x-button
    ><x-button x-popover content="right end, right end, right end, right end, right end" placement="right-end">right end</x-button>
  </div>
  <div class="bottom">
    <x-button x-popover content="bottom start, bottom start, bottom start, bottom start" placement="bottom-start">bottom start</x-button
    ><x-button x-popover content="bottom, bottom, bottom, bottom, bottom, bottom" placement="bottom">bottom</x-button
    ><x-button x-popover content="bottom end, bottom end, bottom end, bottom end, bottom end" placement="bottom-end">bottom end</x-button>
  </div>
</div>
